<template>
  <div class="hello">
    <h3> vue demo</h3>
    <P>{{message}}</P>
    <div v-html="rawHtml"></div>
    <div v-bind:id="dynamicId"></div>
    <div>{{num +1}}</div>
    <div>{{flag ? "结果1":"结果2" }}</div>
    <p v-if="flag2">我是方文镜 </p>
    <p v-else> 我跳出来了</p>
    <p v-show="flag2">你真的是方文镜吗</p>
    <div>
      <h3> 列表渲染</h3>
      <ul>
        <li v-for="(item,index) in newsList" :key ="item.id">
          {{item.title}}
        </li>
      </ul>
    </div>
    <button v-on:click="counter +=1">点击:counter ={{counter}}</button>
    <button v-on:click="clickHandle">按钮</button>
    <p>{{message2}}</p>
    <button @click="say('hi')">say hi</button>
    <button @click="say('what')">say what</button>
    <ui>
      <li @click="clickItemHandle(item)" v-for="(item,index) in names" :key ="index">{{item}}</li>
    </ui>
    <input type="text" v-model.lazy="username">
    <input type="text" v-model.trim="password">
    <p>{{username}}</p>
    <p>{{password}}</p>
    <button>获取用户名密码</button>
    <button @click="clickGetUserName"></button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return {
      message: "学习vue",
      rawHtml:"<a href='https://www.bilibili.com'> bilibili </a> ",
      dynamicId:1001,
      num:10,
      flag :true ,
      flag2 : true,
      counter:1,
      message2: "消息通知",
      names:["iwen","ime","frank"],
      username:"", 
      password:"", 
      newsList:[
        {
          id:1001,
          title:"今日新闻1"
        },
        {
          id:1002,
          title:"今日新闻2"
        },
        {
          id:1003,
          title:"今日新闻3"
        },
        {
          id:1004,
          title:"今日新闻4"
        }
      ]
    }
  },
  methods:{
        clickHandle(event){
            // 在事件中，读取data中的属性  
            this.message2 ="消息被撤回了",
            console.log(event);
            event.target.innerHTML ="点击之后"
        },
        say(data){
        console.log(data);
      },
      clickItemHandle(item){
        console.log(item);
      },
      clickGetUserName(){
        console.log(this.username);
        console.log(this.password);
      }
      }
}
</script>

